<template>
  <div class="home">
    <Banner :src="Src1"></Banner>
    <Jinpintuijian :src="Src3" title="精品推荐"></Jinpintuijian>
    <JPliebiao :arr="jpList"></JPliebiao>
    <Jinpintuijian :src="Src5" title="热门兑换"></Jinpintuijian>
    <Banner :src="Src2"></Banner>
    <JPliebiao :arr="hotList"></JPliebiao>
    <Jinpintuijian :src="Src6" title="鸡腿攻略" :ismore="true"></Jinpintuijian>
    <Gonlve></Gonlve>
  </div>
</template>

<script>
// @ is an alias to /src
import Banner from "../components/Shoyei/Banner.vue";
import Jinpintuijian from "../components/Shoyei/Jinpintuijian.vue";
import JPliebiao from "../components/Shoyei/JPliebiao.vue";
import Gonlve from "../components/Shoyei/Gonlve.vue";
import Remenduihuan from "../components/Shoyei/Remenduihuan.vue";
import Src1 from "../assets/images/home/banner.png";
import Src2 from "../assets/images/home/ad.png";
import Src3 from "../assets/images/home/Recommend.png";
import Src4 from "../assets/images/home/Arrow.png";
import Src5 from "../assets/images/home/hot.png";
import Src6 from "../assets/images/home/integral.png";
import { getRecommendApi, getHotListApi } from "../components/http/api";

export default {
  name: "Home",
  components: {
    Banner,
    Jinpintuijian,
    JPliebiao,
    Remenduihuan,
    Gonlve,
  },
  data() {
    return {
      Src1,
      Src2,
      Src3,
      Src4,
      Src5,
      Src6,
      jpList: [],
      hotList: [],
    };
  },
  created() {
    this.getJPData();
    this.getHotData();
  },
  methods: {
    // getHotListApi
    async getJPData() {
      const { data } = await getRecommendApi();
      // 把请求回来的数据更新
      this.jpList = data.data.records.map((e) => {
        e.coverImg = `http://sc.wolfcode.cn` + e.coverImg;
        return e;
      });
    },
    async getHotData() {
      const { data } = await getHotListApi();
      // 把请求回来的数据更新
      this.hotList = data.data.records.map((e) => {
        e.coverImg = `http://sc.wolfcode.cn` + e.coverImg;
        return e;
      });
    },
  },
};
</script>
